iT邦幫忙

2021 iThome 鐵人賽

DAY 12
0
Modern Web

你阿嬤成為網頁前端工程師的第一步系列 第 12

[Day 12] 阿嬤都看得懂的 CSS 收整與 DRY 策略

  • 分享至 

  • xImage
  •  

阿嬤都看得懂的 CSS 收整與 DRY 策略

玫瑰即使換個名字,還是同樣芬芳。 -莎士比亞

歡迎各位阿嬤回到你阿嬤成為網頁工程師的...等等,別走啊,我知道標題今天又是 CSS,但是我保證今天不會再介紹多如繁星、金魚腦記不清的樣式了!

咦,但是 CSS 不就是樣式嗎?不介紹更多樣式,還要介紹什麼?

沒關係,先讓我們看看昨天的一段程式。

<div>
	<div style="margin:2px; height:100px; width:100px; background-color:red; color:white; text-align:center; line-height:100px;">區塊一</div>
	<div style="margin:2px; height:100px; width:100px; background-color:violet; color:white; text-align:center; line-height:100px;">區塊二</div>
	<div style="margin:2px; height:100px; width:100px; background-color:red; color:white; text-align:center; line-height:100px;">區塊三</div>
	<div style="margin:2px; height:100px; width:100px; background-color:red; color:white; text-align:center; line-height:100px;">區塊四</div>
</div>

是不是對各位阿嬤的眼睛超傷的?而且根本像是乖孫不乖,被老師罰抄課文抄 4 次,越抄越煩,越抄越火大!

對,今天就是要教各位阿嬤不用重複的方法!也就是 DRY
.....呃,好,真的好乾。

DRY 的意思是 Don't repeat yourself,也就是不要重複抄寫,不要複製貼上!因為工程師都、很、懶!不是,是生命應該浪費在美好的事物上。所以,我們應該怎麼避免重複呢?

首先,讓我們觀察重複的部分。在這 4 個標籤中,
<div style="margin:2px; height:100px; width:100px; background-color:red; color:white; text-align:center; line-height:100px;">區塊一</div>
紅色的部分都是重複的。

再來,讓我們想想,這些重複的地方,是否可能 / 應該被收整在一起呢?

我知道,這個問題乍看之下還滿讓人傻眼的:我們都還沒介紹什麼收整的方法,怎麼會知道哪些重複的地方可能收整在一起?沒關係,讓我們還是先想想,這些重複的地方在幹嘛?沒錯,是告訴瀏覽器有個 div 標籤,然後它的樣式長這樣那樣。

我們在更後面的文章中,會告訴大家怎麼使用腳本,讓瀏覽器重複產生 HTML 標籤,或者說操縱整個 DOM 樹。在這篇文章當中,我們先來看看怎麼收整這些落落長的樣式。不過,在那之前,我們先來玩個遊戲。

當我說「粉紅色大象」的時候,你想到什麼?你大概想到一個四隻粗腿、兩隻長牙、一根長鼻,短尾巴短腿,粉紅色的生物。

等等,我剛剛只說粉紅色大象,所以你說這東西是粉紅色,這合理,可是為什麼你會知道這東西有粗腿、長牙、長鼻這些屬性呢?

廢話,因為 大象 這個類別的東西,都有粗腿、長牙、長鼻這些屬性啊!

很好,這表示,我們可以把都有某些屬性的東西,全部收整到某個分類當中。問題來了,這個分類的名稱,是否會影響到這個分類中的東西有哪些屬性?

不,不會的。熟讀莎士比亞的阿嬤會說:

玫瑰即使換個名字,還是同樣芬芳。

當我告訴你,我從現在開始,把會跳的兔子統統稱作「嘎法蓋」,然後我又說到「粉紅色的嘎法改」的時候,你就會知道我在指 會跳的粉紅色的兔子;不管你之前是否知道,又大家是否認同「嘎法蓋」指的就是會跳的兔子。

因此,我們可以告訴瀏覽器,從現在開始,某個分類裡面的東西都有某些屬性,而且我們把這個分類任意武斷地叫作某個名字。從此以後,瀏覽器只要看到某個元件屬於這個分類,就會知道這個元件有那些屬性。

以上面那 4 個區塊的例子而言,我們可以告訴瀏覽器,這 4 個區塊都屬於 gavagai 這個分類,而在 gavagai 分類中的東西,都有以下這些屬性:

	margin:2px;
	height:100px; 
	width:100px; 
	background-color:red; 
	color:white; 
	text-align:center; 
	line-height:100px;

等等,可是區塊二的顏色分明是紫羅蘭色啊!沒關係嘛,平常大象也是灰色啊,你剛剛不也知道粉紅色大象是粉紅色的?我就之後再告訴瀏覽器,區塊二是紫羅蘭色的 gavagai 就好囉!

那麼,我們應該怎麼告訴瀏覽器,這 4 個區塊都屬於 gavagai 這個分類呢?很簡單,只要在標籤中,加上 class 字樣,並且後面加上等號,再加上雙引號,雙引號內加上類別名稱就可以了。因此,寫起來會是像這樣:

<div class="gavagai">區塊一</div>

是不是清爽超多呢!

等等,我們確實是把 CSS 樣式收整出來了沒錯,但是我們要怎麼告訴瀏覽器,這些被收整出來的樣式,屬於哪個標籤呢?是直接把 gavagai 這個字樣,放在所有收整出的樣式前面嗎?

這就留待我們明天介紹 CSS 選擇器的時候,再深入討論囉!


上一篇
[Day 11] 阿嬤都看得懂的基礎 CSS 樣式-圖片篇
下一篇
[Day 13] 阿嬤都看得懂的基礎 CSS 選擇器
系列文
你阿嬤成為網頁前端工程師的第一步30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言